<!doctype html>
<html>
<head>
	<title>Geolocation</title>
	<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
	<link rel="stylesheet" href="css/geo.style.css">
	<script src="js/geo.script.js" type="text/javascript" charset="utf-8" async defer></script>
</head>
<body onload="initGeoApp();">
	<header id="header" class="">
		<hgroup>
			<h1>Geolocation & Web Worker</h1>
			<h2>Making it work</h2>
		</hgroup>
	</header><!-- /header -->
	<section>
		<p>This is the geolocation example map</p>
		<div id="map_canvas">

		</div>
		<p>This is the output from the navigator.geolocation object.</p>
		<table>
			<tr>
				<td>accuracy :</td>
				<td><span id="accuracyOutput"></span></td>
			</tr>

			<tr>
				<td>altitude:</td>
				<td><span id="altitudeOutput"></span></td>
			</tr>
			<tr>
				<td>altitudeAccuracy:</td>
				<td><span id="altitudeAccuracyOutput"></span></td>
			</tr>
			<tr>
				<td>heading:</td>
				<td><span id="headingOutput"></span></td>
			</tr>
			<tr>
				<td>latitude:</td>
				<td><span id="latitudeOutput"></span></td>
			</tr>
			<tr>
				<td>longitude:</td>
				<td><span id="longitudeOutput"></span></td>
			</tr>
			<tr>
				<td>speed:</td>
				<td><span id="speedOutput"></span></td>
			</tr>
		</table>
	</section>
	<aside>
		<p>This is the Web Worker.</p>
		<p>Prime number calculation result: 
			<output id="result"></output>
		</p>
		<input type="button" value="Display Web Worker" onClick="displayWorker();">
		<input type="button" value="Stop Web Worker" onClick="stopWorker();">
	</aside>
</body>
</html>